<template>
	<view>
		 
		<view class="Customer">
			<text>{{bankCard}}</text>
		</view>
	 
		<view class="Gimhae">
			<text>真实姓名:</text> <input type="text" v-model="name" placeholder="请输入真实姓名">
		</view>
		<view class="Gimhae">
			<text style="margin-right: 10rpx;">银行卡:</text> <input type="text" maxlength="25" style="width: 500rpx;" v-model="Card"
				placeholder="请输入银行卡号">
		</view>
		<view class="Gimhae">
			<text>预留手机号:</text> <input type="text" maxlength="11" v-model="phone" placeholder="请输入预留手机号">
		</view>
		<view class="Gimhae">
			<text style="width: 180rpx;">银行名称:</text> <input type="text" v-model="nameCard" placeholder="请输入银行名称">
		</view>
		<view class="u-but" v-if="cardType == 'TJ'">
			<u-button @click="submit()" text="提交" shape="circle" color="#ff6600"></u-button>
		</view>
		<view class="u-but" v-if="cardType == 'BJ'">
			<u-button @click="modifySubmit()" text="修改" shape="circle" color="#ff6600"></u-button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankCard:'添加银行卡',
				name: '',
				Card: '',
				phone: '',
				nameCard:'',
				cardType:'',
				CardId:'',
			}
		},
		onLoad(o) {
			this.cardType = o.type
            if(o.type == 'BJ'){
				uni.setNavigationBarTitle({
					title:'编辑银行卡'
				})
				this.CardId = o.id
				this.cardContent(o.id)
			}else if(o.type == 'TJ'){
				
				
			}
		},
		methods: {
			
			cardContent(id){
				this.$api.informationDetails({
					id:id
				}).then(res=>{
					this.name = res.data.bank_name
					this.Card = res.data.bank_code
					this.phone = res.data.phone
					this.nameCard = res.data.name
				})
			},
			modifySubmit(){
				this.$api.ModifyCard({
					username: this.name,
					bank_code: this.Card,
					phone: this.phone,
					bank_name: this.nameCard,
				}).then(res=>{
					uni.$u.toast('修改成功');
				})
			},
			submit() {
				var reg_user = /^[\u4e00-\u9fa5]{2,4}$/; //2-4个中文字符正则
				var reg_Bubble = /[\u4E00-\u9FA5]/g; //不能输入中文
				var reg_tel =
					/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //11位手机号码正则
				if (this.name == "") {
					uni.showToast({
						title: '请输入您的真实姓名',
						icon: "none"
					})
					return false;
				} else if (!reg_user.test(this.name)) {
					uni.showToast({
						title: '姓名只能为2-4中文!',
						icon: "none"
					})
					return false;
				}
				if (this.Card == "") {
					uni.showToast({
						title: '请输入您的银行卡号',
						icon: "none"
					})
					return false;
				}
				if (this.phone == "") {
					uni.showToast({
						title: '请输入您的手机号',
						icon: "none"
					})
					return false;
				} else if (!reg_tel.test(this.phone)) {
					uni.showToast({
						title: '请正确填写您的手机号码!',
						icon: "none"
					})
					return false;
				}
				if (this.typelx == "") {
					uni.showToast({
						title: '请输入您的银行卡类型',
						icon: "none"
					})
					return false;
				}

				this.$api.BindBank({
					username: this.name,
					bank_code: this.Card,
					phone: this.phone,
					bank_name: this.nameCard,
				}).then(res => {
					console.log(res, 'res')
					if (res.code == 1) {
						uni.showToast({
							title: res.info,
							icon: "none"
						})
						setTimeout(() => {
							uni.navigateBack(-1)
						}, 2000)
					}

				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}


	.Customer {
		display: flex;
		padding: 30rpx;
		border-radius: 10rpx;
		margin: 0 20rpx;
		background-color: #ffffff;

		text {
			font-size: 30rpx;
			color: #000;
			margin-right: 10rpx;
		}

		text:nth-child(2) {
			font-size: 33rpx;
			color: #bebecc;
			margin-left: 20rpx;
		}

	}

	.coalescence {
		display: flex;
		padding: 30rpx;
		border-radius: 10rpx;
		margin: 0 20rpx;
		background-color: #ffffff;
		border-bottom: 1rpx solid #e2e2e2;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.Processing {

			display: flex;
			align-items: center;
			// justify-content: space-between;


			text {
				font-size: 30rpx;
				color: #262626;
				margin-right: 10rpx;
			}

			input {
				font-size: 30rpx;
				width: 230rpx;
			}
		}

		.Spring {
			.heavens {
				text {
					font-size: 28rpx;
					color: #bebebe;
				}
			}
		}
	}

	.u-but {
		margin: 60rpx 20rpx;
	}

	.Gimhae {
		margin: 0 20rpx;
		padding: 30rpx;
		background-color: #ffff;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #e2e2e2;

		text {
			font-size: 28rpx;
			color: #262626;
			width: 180rpx;
		}

		input {
			font-size: 28rpx;
			color: #262626;
		}

	}
</style>